<template>
  <div class="about clear">
    <div class="head clear " style="display: flex;
  justify-content:space-between;
  flex-wrap:wrap;">
      <div class="div clear" style="margin-right:50px;margin-left:15px;display:flex;align-items:center;">
          <img src="../../assets/image/个人中心@2x.png" alt="" class="percen">
          <span class="sapn1" style="color:#fff;">个人中心</span>
      </div>
        <div class="div" style="margin-top:12px;">
            <span class="sapn2" style="color:#fff;">人员管理</span>
        </div>
        <div class="div" style="margin-left:60px;display:flex;align-items:center;" @click="newperple">
          <img src="../../assets/image/新建@2x.png" alt="" class="percen">
          <span class="sapn1" style="color:#fff;">新建</span>
      </div>

    </div>
    <div class="main clear">
         <div class="show" v-for="(item,k) in topnav" :key="k" @click="admin($event,k)">
             <div :class="[item.sex=='1' ? 'top2' : '',item.sex=='2' ? 'top1' : '']"  id="tt" class="top clear">
                  <div class="left1 clear">
                    <img src="../../assets/image/女@2x.png" alt="" v-if="item.sex===2">
                    <img src="../../assets/image/男@2x.png" alt="" v-else-if="item.sex===1">
                    <p class="age">{{item.name}}</p>
                     <p class="age">{{item.age}}岁</p>
                     <div class="tu">
                    <img src="../../assets/image/1.png" alt="" v-if="item.canjidengji===0">
                    <img src="../../assets/image/2.png" alt="" v-if="item.canjidengji===1">
                    <img src="../../assets/image/3.png" alt="" v-if="item.canjidengji===2">
                    <img src="../../assets/image/4.png" alt="" v-if="item.canjidengji===3">
                    <img src="" alt="" v-if="item.canjidengji===4">
                  </div>
                  </div>

             </div>
             <div class="foot clear">
               <div class="footone clear">
                 <div class="clear one" style="padding-top:10px;">
                      <p>残疾证号:  {{item.zhengphone}}</p>
                 </div>
                 <div class="clear one">
                      <p class="ssx">家庭地址:  {{item.homeaddress}}</p>
                 </div>
                 <div class="clear one" style="margin-bottom:10px;" >
                      <p style="">联系电话:  {{item.phone}}</p>
                 </div>

               </div>
             </div>
         </div>
    </div>
  </div>
</template>
<script>
import {listPeople} from '../../apiCanJi/apiCanji'
export default {
  data () {
    return {
      topnav: [],
      xiu: ''
    }
  },
  methods: {
    newperple () {
      this.$router.push('newperple')
    },
    admin (e, k) {
      this.$router.push('admin?id=' + this.topnav[k].disid)
      var str1 = JSON.stringify({id: this.topnav[k].disid})
      localStorage.disid = str1
    },
    show () {
      var odv = document.getElementsByClassName('top')
      var id = JSON.parse(localStorage.userid).id
      console.log(id)
      listPeople({userid: id}).then(res => {
        console.log(res)
        // for (let i = 0; i < res.length; i++) {
        //   if(res[i].canjidengji==0){
        //      res[i].canjidengji="Ⅰ"
        // }else if(res[i].canjidengji==1){
        //      res[i].canjidengji="Ⅱ"
        // }else if(res[i].canjidengji==2){
        //      res[i].canjidengji="Ⅲ"
        // }else if(res[i].canjidengji==3){
        //      res[i].canjidengji="Ⅳ"
        // }else if(res[i].canjidengji==4){
        //      res[i].canjidengji=""
        // }
        // }

        this.topnav = res
        // console.log(this.topnav[0].canjidengji);
      })
    }
  },
  mounted () {
    document.body.style.backgroundColor = '#FAF9FE'
  },
  created () {
    this.show()
    document.title = '人员管理'
  }
}
</script>
<style scoped>
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  zoom: 1;
}
.head{
  width: 100%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F1 0%, #1DC7F1 100%);
  position: fixed;
  top:0px;
  z-index:100;
}
.percen{
  width: 15px;
  height: 15px;
  margin: 0px 5px 0px 0px;
}
.span1{
  width: 59.5px;
  height: 14.5px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  float: left;
  margin-right: 60px;
}
.div {
  float: left;
  font-size: 15px;
  font-weight: bold;

}
.span2{
  width: 67px;
  height: 16px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
}
.main{
  width: 95vw;
  margin: 0px auto;
  margin-top: 54px;
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.show{
  /* width: 46vw; */
  margin-bottom: 10px;

box-shadow: 0px 2px 10px 0px rgba(29, 164, 242, 0.1);
  border-radius: 8px ;

}
.show:nth-of-type(2n){

}
.top{
  width: 46vw;
  /* height: 44px; */
  /* background-color: #f00; */
  border-radius: 8px 8px 0px 0px;
  margin-right: 0px;
  margin-right: 0px;
}
.top img{
  width: 33px;
  height: 33px;
  float: left;
  margin: 3px 0px 0px 5px;
}
.left{
  /* width: 90px; */
margin-top: 7.5px;
font-size: 15px;
font-weight: 500;
  float: left;

}
.left p{
  font-size: 13px;
  margin-bottom: 10.5px;
  float: left;
}
p{
  margin: 0px;
}
.age{

  font-size: 13px;
  /* margin-left: 22px; */
  float: left;
  /* margin-top: 2px; */
  line-height: 38px;
  margin-left: 5px;
  margin-top: 1px;
}
.foot{
  width: 46vw;
  background-color: #fff;
  border-radius: 0px 0px 8px 8px;
}
.foot img{
  width: 16px;
  height: 16px;
  margin: 12px 10px 0px 2.5px;
  float: left;
}
.foot p{
  width: 152px;
  font-size: 12px;
  float: left;
/* font-weight: 500; */
color: #333333;
line-height: 20px;

}
.top .tu{
  /* position: absolute; */
  /* width: 16px; */
  /* height: 16px; */
  /* top:38px; */
  /* left: 12px; */
  float: right;
  font-size: 15px;
  margin-top: 8px;
  /* border: 1px solid #f00; */
  /* text-align: center;
  border-radius: 8px;
  line-height: 18px;
  color: #f00; */
}
.tu img{
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.top1{
  background-color: #FFE3F6;
}
.top2{
  background-color: #CDEFFF;
}
.ssx{
   display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
    overflow: hidden; /*超出的文本隐藏*/
    text-overflow: ellipsis; /* 溢出用省略号*/
    -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/

}
.one p{
  margin-left: 8px;
  font-size: 12px;
  line-height: 26px;
  margin-right: 8px;
}
</style>
